import {Circle as CircleStyle, Fill, Icon, Stroke, Style, Text} from "ol/style";
import {v4 as uuidv4} from "uuid";
import Overlay from "ol/Overlay";
// import {localPoliceStation} from '@/common/local-police-station'
import {
  policeStatisticsList,
  regionalCentersList
} from '@/views/module/member/home/Submodule/home/components/openlayersMapViewer/utils/data'

export default {
  name: '接收数据',
  data() {
    return {
      // markerStyle: new Style({
      //   image: new Icon({
      //     anchor: [0.5, 0.5],
      //     anchorOrigin: 'bottom-right',
      //     anchorXUnits: 'fraction',
      //     anchorYUnits: 'pixels',
      //     offsetOrigin: 'top-left',
      //     src: '',
      //     scale: 1,
      //     offset: [0, 0]
      //   }),
      //   text: new Text({
      //     text: '',
      //     offsetY: -40,
      //     offsetX: 15,
      //     scale: 0.8,
      //     font: '12px Microsoft YaHei',
      //     fill: new Fill({
      //       color: '#fff'
      //     })
      //   })
      // })
    }
  },
  methods: {
    // 单个报警
    openAlarmData(data) {
      let layerId = data.layerId || 'alarmLayer'
      let alarmLayer = this.gisIns.getLayer(layerId)
      if (!alarmLayer) {
        alarmLayer = this.gisIns.createVector({zIndex: 108}, layerId)
      }
      let layerSource = alarmLayer.getSource()
      if (data.clearOwnLayer) {
        layerSource.clear()
      }
      let curItem = layerSource.getFeatureById(`camera_${data.item.id}`)
      if (curItem) {
        layerSource.removeFeature(curItem);
      }
      let marker = this.gisIns.createPoint(data.item.lng || '', data.item.lat || '', {
        pointer: true,
        customAlarmType: data.item.customAlarmType,
        type: '报警',
        data: {
          ...data.item,
          icon: data.item.icon || this.$mapicon.alarmFenceMarkerIcon
        }
      })
      marker.setStyle(resolution => {
        return new Style({
          image: new Icon({
            anchor: [0.5, 0.5],
            anchorOrigin: 'bottom-right',
            anchorXUnits: 'fraction',
            anchorYUnits: 'pixels',
            offsetOrigin: 'top-left',
            src: data.item.icon || this.$mapicon.alarmFenceMarkerIcon,
            scale: 1,
            offset: [0, 0]
          })
        });
      })
      marker.setId(`camera_${data.item.id}`)
      this.gisIns.addIconArrFeatures(layerId, [marker])
      // 显示报警信息
      let coordinates = marker.getGeometry().getCoordinates()
      // 跳转中心点
      this.toMapCenter(coordinates)
      if (marker.get('customAlarmType') === 'car') {
        this.showCarAlarmOverlay(marker)
      } else if (marker.get('customAlarmType') === 'face') {
        this.showFaceAlarmOverlay(marker)
      } else if (marker.get('customAlarmType') === 'imsi') {
        this.showImsiAlarmOverlay(marker)
      }
    },
    // 报警列表
    openAlarmDatas(options) {
      let alarmLayer = this.gisIns.getLayer('alarmLayer')
      if (!alarmLayer) {
        alarmLayer = this.gisIns.createVector({zIndex: 108}, 'alarmLayer')
      }
      let layerSource = alarmLayer.getSource()
      if (options.clear) {
        layerSource.clear()
      }
      // 生成点位集合
      let lists = options.datas.map((item, index) => {
        let marker = this.gisIns.createPoint(item.lng || '', item.lat || '', {
          pointer: true,
          customAlarmType: item.customAlarmType,
          type: '报警',
          data: {
            ...item,
            icon: item.icon || this.$mapicon.alarmFenceMarkerIcon
          }
        })
        // 设置style
        marker.setStyle(resolution => {
          return new Style({
            image: new Icon({
              anchor: [0.5, 0.5],
              anchorOrigin: 'bottom-right',
              anchorXUnits: 'fraction',
              anchorYUnits: 'pixels',
              offsetOrigin: 'top-left',
              src: item.icon || this.$mapicon.alarmFenceMarkerIcon,
              scale: 1,
              offset: [0, 0]
            })
          });
        })
        marker.setId(`camera_${item.id}`)
        return marker
      })
      this.gisIns.addIconArrFeatures('alarmLayer', lists)
    },
    // 警力定位人员
    openPoliceDatas(datas) {
      let layerId = datas.layerId || 'perceptualLayer'
      let currentLayer = this.gisIns.getLayer(layerId)
      if (!currentLayer) {
        currentLayer = this.gisIns.createVector({zIndex: 108}, layerId)
      }
      let layerSource = currentLayer.getSource()
      if (datas.clearOwnLayer) {
        layerSource.clear()
      }

      if (datas.mode === 'update') {
        // 更新实时位置
        let areaSource = currentLayer.getSource()
        let curFeature = areaSource.getFeatureById(datas.data.stationNum)
        if (curFeature) {
          // 更新位置
          this.updatePoliceMarker({
            feature: curFeature,
            data: datas.data,
            layerId: layerId,
            layer: currentLayer,
            showInfo: false
          })
        }
        return;
      } else if (datas.mode === 'click') {
        // 获取最新位置
        let areaSource = currentLayer.getSource()
        let curFeature = areaSource.getFeatureById(datas.data.stationNum)
        if (!curFeature) {
          return;
        }
        let newData = curFeature.get('data')
        let nowData = {
          ...newData,
          photo: newData.photo || datas.data.photo
        }
        this.showPoliceInfoOverlayById({
          feature: curFeature,
          type: 'item',
          item: nowData,
          data: nowData,
          layerId: layerId,
          layer: currentLayer
        })
        // 切换中心点
        this.toMapCenter(curFeature.getGeometry().getCoordinates())
      }
      // 生成点位集合
      let lists = datas.datas.map((item, index) => {
        let marker = this.gisIns.createPoint(item.lng, item.lat, {
          attr: {type: '警力'},
          pointer: true,
          data: {
            ...item,
            icon: this.$mapicon.policeHeadMarkerMoveIcon
          }
        })
        // 设置style
        marker.setStyle(resolution => {
          return new Style({
            image: new Icon({
              src: this.$mapicon.policeHeadMarkerMoveIcon,
              scale: 1,
              offset: [0, 0],
              anchor: [0.5, 0.5],
              anchorOrigin: 'bottom-right',
              anchorXUnits: 'fraction',
              anchorYUnits: 'pixels',
              offsetOrigin: 'top-left',
            }),
            text: new Text({
              text: item.name,
              offsetY: -40,
              offsetX: 0,
              scale: 1,
              font: '12px Microsoft YaHei',
              fill: new Fill({
                color: '#edeb17'
              })
            })
          });
        })
        // 设置
        marker.setId(`${item.stationNum}`)
        marker.set('type', '警力')
        return marker
      })
      this.gisIns.addIconArrFeatures(layerId, lists)
    },
    // 重点区域
    openAreaDatas(data, options) {
      console.log(data)
      let layer = this.gisIns.getLayer(data.layer || 'enterLeaveLayer')
      if (layer) {
        this.gisIns.clearLayer(data.layer || 'enterLeaveLayer')
      }
      // 画区域图形
      this.drawAreaFigure(data.item, data.datas, layer, options)
      let center = []

      if (data.item.shape === 'MultiPolygon') {
        center = this.gisIns.transform(data.item.lng, data.item.lat)
        // 移动视角
        this.toMapViewExtent(data.datas[0])
      } else if (data.item.shape === 'Polygon') {
        center = this.gisIns.transform(data.item.lng, data.item.lat)
        // 移动视角
        this.toMapViewExtent(data.datas)
      } else if (data.item.shape === 'LineString') {
        center = this.gisIns.transform(data.datas[0][0], data.datas[0][1])
        // 移动视角
        this.toMapCenter(center)
      }
      // this.toMapCenter(center)
    },

    // 重点区域列表(多个区域)
    openAreasDatas(data, options) {
      let layer = this.gisIns.getLayer(data.layer)
      if (layer) {
        this.gisIns.clearLayer(data.layer)
        this.gisIns.clearLayer('enterLeaveLayer')
      } else {
        // 创建图层
        layer = this.gisIns.createVector({zIndex: 100}, data.layer)
        this.gisIns.clearLayer(data.layer)
      }
      data.datas.forEach(item => {
        this.drawAreaFigure(item, item.datas, layer, options)
      })
    },

    /**
     * 画区域图形
     * @param item
     * @param lists 区域范围坐标
     * @param layer 图层对象
     * @param options
     * @returns {Feature}
     * @returns {options}
     */
    drawAreaFigure(item, lists, layer, options) {
      let PolygonFeature = ''
      if (item.shape === 'MultiPolygon') {
        PolygonFeature = this.gisIns.addMultiPolygon(layer, lists)
      } else if (item.shape === 'Polygon') {
        PolygonFeature = this.gisIns.addPolygon(layer, lists)
      } else if (item.shape === 'LineString') {
        PolygonFeature = this.gisIns.addLineString(layer, lists)
      }
      PolygonFeature.setId(item.id)
      PolygonFeature.setStyle((resolution) => {
        return new Style({
          fill: new Fill({
            color: 'rgba(255, 142, 0, 0.40)'
          }),
          stroke: new Stroke({
            color: 'rgba(255, 153, 0, 1)',
            width: 3
          }),
          circle: new CircleStyle({
            radius: 2
          }),
          text: new Text({
            text: options.showName ? item.name : '',
            scale: 1,
            font: '12px Microsoft YaHei',
            fill: new Fill({
              color: '#fff'
            })
          })
        });
      });

      return PolygonFeature
    },
    // 重点部位
    openKeyPartsDatas(datas) {
      datas.datas.forEach((item) => {
        let Feature = this.$refs.map.gisIns.addPoint('perceptualLayer', item.lng, item.lat, {
          // src: item.icon || this.$mapicon.alarmMarkerIcon,
          attr: {type: 1, cursor: 'pointer'},
          id: `camera_${item.id}`,
          type: '重点部位点位',
          areaId: datas.item.id,
          data: item
        })
        Feature.setStyle((resolution) => {
          return new Style({
            image: new Icon({
              anchor: [0.5, 0.5],
              anchorOrigin: 'bottom-right',
              anchorXUnits: 'fraction',
              anchorYUnits: 'pixels',
              offsetOrigin: 'top-left',
              src: item.icon || this.$mapicon.alarmMarkerIcon,
              scale: 1
            }),
            zIndex: 10
          });
        });
      })
      if (datas.item) {
        let keyPositionFeature = this.$refs.map.gisIns.addPoint('perceptualLayer', datas.item.lng, datas.item.lat, {
          src: datas.item.icon || this.$mapicon.keyPartsMarkercIcon,
          attr: {type: 1, cursor: 'pointer'},
          id: datas.item.id,
          type: '重点部位中心点',
          areaId: datas.item.id,
          data: datas.item
        })

        keyPositionFeature.setStyle(() => {
          return new Style({
            image: new Icon({
              anchor: [0.5, 0.5],
              anchorOrigin: 'bottom-right',
              anchorXUnits: 'fraction',
              anchorYUnits: 'pixels',
              offsetOrigin: 'top-left',
              src: datas.item.icon || this.$mapicon.keyPartsMarkercIcon,
              scale: 0.5
            }),
            zIndex: 8
          })
        })
        let coordinates = keyPositionFeature.getGeometry().getCoordinates()
        this.toMapCenter(coordinates)
      }
    },
    // 人员
    openPersonnelDatas(datas) {
      datas.datas.forEach((item) => {
        let marker = this.$refs.map.gisIns.addPoint('perceptualLayer', item.lng, item.lat, {
          attr: {type: 1, cursor: 'pointer'},
          id: `camera_${item.id}`,
          type: '人员',
          data: item
        })
        marker.setStyle(resolution => {
          return new Style({
            image: new Icon({
              anchor: [0.5, 0.5],
              anchorOrigin: 'bottom-right',
              anchorXUnits: 'fraction',
              anchorYUnits: 'pixels',
              offsetOrigin: 'top-left',
              src: item.icon || this.$mapicon.policeMarkerActiveIcon,
              scale: 0.5,
              offset: [0, 0],
            })
          });
        })
      })
    },
    // 感知
    openPerceptualDatas(datas) {
      let pointLists = []
      for (let i in datas.datas) {
        let list = datas.datas[i]
        list.forEach((item) => {

          let marker = this.gisIns.addPoint('perceptualLayer', item.lng, item.lat, {
            attr: {type: 1, cursor: 'pointer'},
            id: `${item.id}`,
            type: '感知',
            typeId: datas.item.value,
            data: item,
            list: list,
            icon: item.icon || datas.icon,
            activeIcon: datas.icon,
            zIndex: 10,
            activeZIndex: 100,
          })
          marker.setStyle(resolution => {
            return new Style({
              image: new Icon({
                anchor: [0.5, 0.5],
                anchorOrigin: 'bottom-right',
                anchorXUnits: 'fraction',
                anchorYUnits: 'pixels',
                offsetOrigin: 'top-left',
                src: item.icon || datas.icon,
                scale: 0.5,
              }),
              zIndex: 10
            });
          })
          pointLists.push(marker)
        })
      }
      return pointLists
    },
    openRoadLinesDatas(datas) {
      // 路线
      let layer = this.gisIns.getLayer('roadLayer')
      this.gisIns.addLineString(layer, datas.roadLines, {})
      // 生成点位集合
      let lists = datas.roadCameraVos.map((item, index) => {
        let marker = this.gisIns.createPoint(item.bdCamera.lng, item.bdCamera.lat, {
          attr: {type: 101, cursor: 'pointer'},
          data: {
            type: 'camera',
            item: item,
            icon: item.bdCamera.icon || this.$mapicon.cameraMarkerAlarmIcon2
          }
        })
        // 设置style
        marker.setStyle(resolution => {
          return new Style({
            image: new Icon({
              src: item.bdCamera.icon || this.$mapicon.cameraMarkerAlarmIcon2,
              scale: 1,
              offset: [-2, -5],
              offsetOrigin: 'top-right',
              size: [65, 75]
            }),
            text: new Text({
              text: item.bdCamera.id,
              offsetY: -40,
              offsetX: 15,
              scale: 1,
              font: '12px Microsoft YaHei',
              fill: new Fill({
                color: '#fff'
              })
            })
          });
        })
        marker.setId(`camera_${item.bdCamera.id}`)
        // 设置区域id，便于与区域联动
        // marker.set('areaId', id)
        return marker
      })
      this.gisIns.addIconArrFeatures('roadLayer', lists)
    },
    // 进出口
    openEnterLeaveDatas(datas) {
      this.gisIns.clearLayer('enterLeaveLayer')
      datas.datas.forEach((item, index) => {
        if (item.bdArea.shape === "Polygon") {
          let lists = JSON.parse(item.bdArea.points || '[]')
          let PolygonFeature = this.gisIns.addPolygon(this.gisIns.getLayer('enterLeaveLayer'), lists)
          PolygonFeature.setId(item.bdArea.id)
        } else if (item.bdArea.shape === "Circle") {
          // {"center":[104.457234,30.81541],"radius":3114.3399284891784}
          let data = JSON.parse(item.bdArea.points || '{}')
          let CircleFeature = this.gisIns.addCircle(this.gisIns.getLayer('enterLeaveLayer'), {
            center: data.center,
            radius: this.gisIns.meterToRadiusDegrees(data.radius),
          })
          CircleFeature.setId(item.bdArea.id)
        }
        let enterBdCameraSums = item.enterBdCameraSums.map((cameraItem, index1) => {
          let marker = this.gisIns.createPoint(cameraItem.bdCamera.lng, cameraItem.bdCamera.lat, {
            attr: {type: 102, cursor: 'pointer'},
            data: {
              type: 'enterCamera',
              item: cameraItem,
              icon: cameraItem.bdCamera.icon || this.$mapicon.cameraMarkerAlarmIcon2
            }
          })
          marker.setStyle(resolution => {
            return new Style({
              image: new Icon({
                src: cameraItem.bdCamera.icon || this.$mapicon.cameraMarkerAlarmIcon2,
                scale: 1,
                offset: [-2, -5],
                offsetOrigin: 'top-right',
                size: [65, 75]
              }),
              text: new Text({
                text: '进口',
                offsetY: -40,
                offsetX: 15,
                scale: 1,
                font: '12px Microsoft YaHei',
                fill: new Fill({
                  color: '#00EC9A'
                })
              })
            });
          })
          marker.setId(`camera_${cameraItem.bdCamera.id}`)
          // 设置区域id，便于与区域联动
          // marker.set('areaId', id)
          return marker
        })
        this.gisIns.addIconArrFeatures('enterLeaveLayer', enterBdCameraSums)
        let leaveBdCameraSums = item.leaveBdCameraSums.map((cameraItem, index1) => {
          let marker = this.gisIns.createPoint(cameraItem.bdCamera.lng, cameraItem.bdCamera.lat, {
            attr: {type: 102, cursor: 'pointer'},
            data: {
              type: 'enterCamera',
              item: cameraItem,
              icon: cameraItem.bdCamera.icon || this.$mapicon.cameraMarkerAlarmIcon2
            }
          })
          marker.setStyle(resolution => {
            return new Style({
              image: new Icon({
                src: cameraItem.bdCamera.icon || this.$mapicon.cameraMarkerAlarmIcon2,
                scale: 1,
                offset: [-2, -5],
                offsetOrigin: 'top-right',
                size: [65, 75]
              }),
              text: new Text({
                text: '出口',
                offsetY: -40,
                offsetX: 15,
                scale: 1,
                font: '12px Microsoft YaHei',
                fill: new Fill({
                  color: '#00EC9A'
                })
              })
            });
          })
          marker.setId(`camera_${cameraItem.bdCamera.id}`)
          // 设置区域id，便于与区域联动
          // marker.set('areaId', id)
          return marker
        })
        this.gisIns.addIconArrFeatures('enterLeaveLayer', leaveBdCameraSums)
      })
    },
    // 车辆绕圈
    openCarCircleDatas(datas) {
      console.log(datas.datas)
      let lists = datas.datas.map((item, index) => {
        let marker = this.gisIns.createPoint(item.lng || '', item.lat || '', {
          pointer: true,
          markerType: datas.markerType,
          data: {
            type: 'camera',
            item: item,
            icon: item.icon || this.$mapicon.cameraMarkerAlarmIcon2
          }
        })
        // 设置style
        marker.setStyle(resolution => {
          return new Style({
            image: new Icon({
              src: item.icon || this.$mapicon.cameraMarkerAlarmIcon2,
              scale: 1,
              offset: [-2, -5],
              offsetOrigin: 'top-right',
              size: [65, 75]
            }),
            text: new Text({
              text: '',
              offsetY: -40,
              offsetX: 15,
              scale: 1,
              font: '12px Microsoft YaHei',
              fill: new Fill({
                color: '#fff'
              })
            })
          });
        })
        marker.setId(`${item.id}`)
        // 设置区域id，便于与区域联动
        // marker.set('areaId', id)
        return marker
      })
      this.gisIns.addIconArrFeatures('alarmLayer', lists)
    },
    // 案件
    openCaseDatas(datas) {
      // 案件列表弹窗
      this.gisIns.addOverLay(this.$refs.caseOverLay.$el, 'caseWin')
      datas.datas.forEach(item => {
        item.num = item.caseCount
        item.name = item.departmentName
        if (!item.lnglatCoordinate || item.lnglatCoordinate.length !== 2) {

          let policeStationItem = policeStatisticsList.find(station => {
            return station.name === item.departmentName
          })
          item.lnglatCoordinate = policeStationItem?.lnglatCoordinate || []
          item.town = policeStationItem?.town || item.name
        }

        if (item.lnglatCoordinate && item.lnglatCoordinate.length === 2) {
          let elementDiv = document.createElement('div')
          let domid = 'chart' + uuidv4()

          let coordinate = [...this.gisIns.transform(item.lnglatCoordinate[0], item.lnglatCoordinate[1])] || []
          elementDiv.innerHTML = `<div class="columnar-strip case-columnar-strip" id='${domid}'>
                                      <div class="columnar-strip-left case-columnar-strip_name">${item.num}件</div>
                                      <div class="columnar-strip-right case-columnar-strip_icon"></div>
                                    </div>
                                    `

          let columnarStrip = new Overlay({
            id: domid,
            positioning: 'bottom-center',
            element: elementDiv,
            offset: [0, 0],
            stopEvent: false
          })
          // 点击事件
          elementDiv.getElementsByClassName('columnar-strip-right')[0].onclick = () => {
            this.toMapCenter(coordinate)
            // 显示弹窗
            this.caseLists = item.lists || []
            this.gisIns.openOverLay('caseWin', coordinate).setOffset([0, -25]);
            this.$refs.caseOverLay.getData(item)
          }
          this.map.addOverlay(columnarStrip)
          columnarStrip.setPosition(coordinate[0] && coordinate[1] ? coordinate : undefined)
        }
      })
    },
    // 警情
    openWarningInstanceDatas(datas) {
      // 案件列表弹窗
      this.gisIns.addOverLay(this.$refs.caseOverLay.$el, 'caseWin')
      datas.datas.forEach(item => {
        item.num = item.caseCount
        item.name = item.departmentName
        if (!item.lnglatCoordinate || item.lnglatCoordinate.length !== 2) {
          let policeStationItem = policeStatisticsList.find(station => {
            return station.name === item.departmentName
          })
          item.lnglatCoordinate = policeStationItem?.lnglatCoordinate || []
          item.town = policeStationItem?.town || item.name
        }

        if (item.lnglatCoordinate && item.lnglatCoordinate.length === 2) {
          let elementDiv = document.createElement('div')
          let domid = 'chart' + uuidv4()

          let coordinate = [...this.gisIns.transform(item.lnglatCoordinate[0], item.lnglatCoordinate[1])] || []
          elementDiv.innerHTML = `<div class="columnar-strip alarm-columnar-strip" id='${domid}'>
                                      <div class="columnar-strip-left alarm-columnar-strip_name">${item.num}件</div>
                                      <div class="columnar-strip-right alarm-columnar-strip_icon"></div>
                                    </div>
                                    `
          let columnarStrip = new Overlay({
            id: domid,
            positioning: 'bottom-center',
            element: elementDiv,
            offset: [0, 0],
            stopEvent: false
          })
          // 点击事件
          elementDiv.getElementsByClassName('columnar-strip-right')[0].onclick = () => {
            this.toMapCenter(coordinate)
            // 显示弹窗
            this.caseLists = item.lists || []
            this.gisIns.openOverLay('caseWin', coordinate).setOffset([0, -25]);
            this.$refs.caseOverLay.getData(item)
          }
          this.map.addOverlay(columnarStrip)
          columnarStrip.setPosition(coordinate[0] && coordinate[1] ? coordinate : undefined)
        }
      })
    },

    openPopulationDatas(datas) {
      this.gisIns.addOverLay(this.$refs.caseOverLay.$el, 'caseWin')
      let pillarMaxValue = Math.max(...datas.datas.map((n) => n.total))
      datas.datas.forEach(item => {
        item.num = item.total
        if (!item.lnglatCoordinate || item.lnglatCoordinate.length !== 2) {
          let policeStationItem = regionalCentersList.find(station => {
            return station.name === item.name
          })
          item.lnglatCoordinate = policeStationItem?.lnglatCoordinate || []
          item.town = policeStationItem?.town || item.name
        }
        if (item.lnglatCoordinate && item.lnglatCoordinate.length === 2) {
          let elementDiv = document.createElement('div')
          let domid = 'chart' + uuidv4()
          let height = (100 * item.num) / pillarMaxValue
          height = height < 20 ? 100 : height

          let coordinate = [...this.gisIns.transform(item.lnglatCoordinate[0], item.lnglatCoordinate[1])] || []
          elementDiv.innerHTML = `<div class="columnar-strip" id='${domid}'>
                                      <div class="name">${item.town}(${item.num})人</div>
                                      <div class="value" style='height:${height + 'px'}'></div>
                                    </div>
                                    `

          let columnarStrip = new Overlay({
            id: domid,
            positioning: 'bottom-center',
            element: elementDiv,
            offset: [0, 5],
            stopEvent: false
          })
          // 点击事件
          elementDiv.getElementsByClassName('value')[0].onclick = () => {
            this.toMapCenter(coordinate)
            // 显示弹窗
            this.caseLists = item.lists || []
            this.gisIns.openOverLay('caseWin', coordinate).setOffset([0, -height - 25]);
            this.$refs.caseOverLay.getData(item)
          }
          this.map.addOverlay(columnarStrip)
          columnarStrip.setPosition(coordinate[0] && coordinate[1] ? coordinate : undefined)
        }
      })
    },

    /**
     * 更新警员最新位置
     */
    updatePoliceMarker(options) {
      let {
        feature: featureItem,
        data: item,
        layerId: layerId,
        layer: layer,
        showInfo: showInfo
      } = options
      this.zIndex++
      if (showInfo) {
        let data = featureItem.get('data')
        let coordinate = this.gisIns.transform(data.lng, data.lat)
        featureItem.getGeometry().setCoordinates(coordinate)
        // 显示弹窗
        this.gisIns.openOverLay('policeInfoWin', coordinate);
        this.map.getOverlayById('policeInfoWin').setOffset([20, -50])
        // 切换中心点
        this.toMapCenter(coordinate)
      } else {
        // 最新坐标
        let oldp = featureItem.getGeometry().getCoordinates()
        let newp = this.gisIns.transform(Number(item.lng), Number(item.lat))
        if (this.timers[`${item.stationNum}`] && this.timers[`${item.stationNum}`]['timer']) {
          clearInterval(this.timers[`${item.stationNum}`]['timer']);
        }
        this.timers[`${item.stationNum}`] = {
          index: 0,
          points: [],
          timer: null
        }
        this.timers[`${item.stationNum}`]['index'] = 0
        this.timers[`${item.stationNum}`]['points'] = [oldp, newp]
        this.timers[`${item.stationNum}`]['timer'] = setInterval(() => {
          if (this.timers[`${item.stationNum}`]['index'] + 1 >= this.timers[`${item.stationNum}`]['points'].length) {
            clearInterval(this.timers[`${item.stationNum}`]['timer']);
            delete this.timers[`${item.stationNum}`]
            return;
          }
          // 到转折点旋转角度
          if (this.nextPoint(item.stationNum) === this.timers[`${item.stationNum}`]['points'][this.timers[`${item.stationNum}`]['index'] + 1]) {
            this.timers[`${item.stationNum}`]['index']++;
          }
          //改变坐标点
          let coordinate = this.timers[`${item.stationNum}`]['points'][this.timers[`${item.stationNum}`]['index']]
          featureItem.getGeometry().setCoordinates(coordinate)
        }, 10);
      }

      // 设置新图标
      // 显示在最高层
      // 添加图标（选中图标）
      let newItem = {}
      if (showInfo) {
        newItem = {
          ...featureItem.values_.data
        }
      } else {
        newItem = {
          ...item
        }
      }
      featureItem.set('data', {
        ...newItem,
        bdBusinessOrganizeName: newItem.bdBusinessOrganizeName,
        lng: newItem.lng,
        lat: newItem.lat,
      })
      featureItem.setStyle((resolution) => {
        return new Style({
          image: new Icon({
            src: this.$mapicon.policeHeadMarkerMoveIcon,
            scale: 0.5,
            offset: [0, 0],
            anchor: [0.5, 0.5],
            anchorOrigin: 'bottom-right',
            anchorXUnits: 'fraction',
            anchorYUnits: 'pixels',
            offsetOrigin: 'top-left',
          }),
          text: new Text({
            text: newItem.name,
            offsetY: -25,
            offsetX: 0,
            scale: 1,
            font: '12px Microsoft YaHei',
            fill: new Fill({
              color: '#edeb17'
            })
          }),
          zIndex: this.zIndex
        });
      });
    },
    nextPoint(key) {
      let index = this.timers[`${key}`]['index'];
      // 获取在屏幕的像素位置
      // 将点击要素（t点）的地理坐标转换为屏幕像素坐标
      let p1 = this.map.getPixelFromCoordinate(this.timers[`${key}`]['points'][index]);
      let p2 = this.map.getPixelFromCoordinate(this.timers[`${key}`]['points'][index + 1]);
      if (!p1 || !p2) {
        return this.timers[`${key}`]['points'][index + 1]
      }

      let dx = p2[0] - p1[0];
      let dy = p2[1] - p1[1];
      // 打印可见  在没有走到下一个点之前，下一个点是不变的，前一个点以这个点为终点向其靠近
      let distance = Math.sqrt(dx * dx + dy * dy)
      // console.log(distance)
      if (distance <= 1) {
        return this.timers[`${key}`]['points'][index + 1];
      } else {
        let x = p1[0] + dx / distance;
        let y = p1[1] + dy / distance;
        // 将px坐标转经纬度
        let coor = this.map.getCoordinateFromPixel([x, y]);
        // 这里会将前一个点重新赋值  要素利用这个坐标变化进行移动
        this.timers[`${key}`]['points'][index] = coor;
        return this.timers[`${key}`]['points'][index];
      }
    }
  }
}
